<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-menu
          menu-trigger="click"
          active-text-color="#ff8200"
          :default-active="activeIndex"
          mode="horizontal"
          @select="selectMenuItem"
        >
          <el-menu-item
            :index="v.index"
            v-for="(v, i) in categoryItem"
            :key="i"
            >{{ v.title }}</el-menu-item
          >
        </el-menu>
      </el-col>
    </el-row>
    <hotRankList
      :articleList="articleList"
      :categoryIndex="Number(activeIndex)"
    ></hotRankList>
  </div>
</template>

<script>
import hotRankList from "../components/hotrank/HotRankList.vue";
export default {
  components: {
    hotRankList,
  },
  data() {
    return {
      activeIndex: "0",
      categoryItem: [
        {
          title: "访问榜",
          index: "0",
          value: "hot",
        },
        {
          title: "收藏榜",
          index: "1",
          value: "collection",
        },
        {
          title: "点赞榜",
          index: "2",
          value: "like",
        },
        {
          title: "分享榜",
          index: "3",
          value: "share",
        },
        {
          title: "话题榜",
          index: "4",
          value: "title",
        },
      ],
      queryInfo: {
        // show-按时间 hot-按访问量 like-点赞量 collection-收藏量 null-按照label分类
        type: "hot",
        page: 1,
        limit: 20,
        // 文章分类
        label: -1,
      },
      // 文章列表
      articleList: [],
    };
  },
  created() {
    // 获取文章数据列表
    this.getArticleList();
  },
  methods: {
    // 获取文章分类的点击事件
    selectMenuItem(selectIndex) {
      if (selectIndex == "4") {
        return this.$showMsg({ msg: "敬请期待！", type: "warning" });
      }
      console.log(selectIndex);
      this.activeIndex = selectIndex;
      let index = Number(selectIndex);
      this.queryInfo.type = this.categoryItem[index].value;
      // 获取文章列表数据
      console.log(this.queryInfo);
      this.articleList = [];
      this.getArticleList();
    },

    // 获取文章列表数据
    async getArticleList() {
      console.log(this.queryInfo);
      const { code, msg, result } = await this.$http.get("/api/tweet/type", {
        params: this.queryInfo,
      });
      if (code != 200) {
        return this.$showMsg({ msg: "获取文章数据列表失败！", type: "error" });
      }
      this.articleList = result.list;
      console.log("文章数据", this.articleList);
    },
  },
};
</script>

<style scoped lang="less">
</style>